import React from 'react';
import Axios from 'axios';
import { Pagination} from 'element-react';
import 'element-theme-default';
import Topchlid from '../Components/topchild'

class Toplist extends React.Component{
    constructor(props){
        super(props);
        this.state={
            res:'',
        }
    }
    componentWillMount(){
  
        var that =this;
		Axios({
			method:'post',
			url:'http://10.31.160.62:3000/gettoplist',
			dataType:'json'
		}).then(function(res){
			that.setState({
				res:res.data,
			})
		})	
    }
    onCurrentChange(currentPage){
		Axios({
			method:'post',
			url:'http://10.31.160.62:3000/gettoplist',
            data:{page:currentPage},
			dataType:'json'
		}).then((res)=>{
            this.setState({
                res:res.data
            })
        })
    }
	render(){
        var _res = this.state.res.rows;
        var html=[];
        if(_res){
            for(var i=0;i<_res.length;i++){
                html.push(
                    <Topchlid key={i} {..._res[i]}/>
                )
            }
        }
		return(
            <div className="wrap">
			<div className="main">
                <div className="toplist_nav">
                    <dl className="toplist_nav__list">
                        <dt className="toplist_nav__tit">QQ音乐巅峰榜</dt>
                        <dd className="toplist_nav__item">
                            <a href="##" className="toplist_nav__link toplist_nav__link--current">巅峰榜·福特新蒙迪欧·流行指数</a>
                        </dd>
                        <dd className="toplist_nav__item">
                            <a href="##" className="toplist_nav__link">巅峰榜·热歌</a>
                        </dd>
                        <dd className="toplist_nav__item">
                            <a href="##" className="toplist_nav__link">巅峰榜·新歌</a>
                        </dd>
                        <dd className="toplist_nav__item">
                            <a href="##" className="toplist_nav__link">巅峰榜·网络歌曲</a>
                        </dd>
                        <dd className="toplist_nav__item">
                            <a href="##" className="toplist_nav__link">巅峰榜·内地</a>
                        </dd>
                        <dd className="toplist_nav__item">
                            <a href="##" className="toplist_nav__link">巅峰榜·港台</a>
                        </dd>
                        <dd className="toplist_nav__item">
                            <a href="##" className="toplist_nav__link">巅峰榜·欧美</a>
                        </dd>
                        <dd className="toplist_nav__item">
                            <a href="##" className="toplist_nav__link">巅峰榜·韩国</a>
                        </dd>
                        <dd className="toplist_nav__item">
                            <a href="##" className="toplist_nav__link">巅峰榜·日本</a>
                        </dd>
                        <dd className="toplist_nav__item">
                            <a href="##" className="toplist_nav__link">巅峰榜·音乐人</a>
                        </dd>
                        <dd className="toplist_nav__item">
                            <a href="##" className="toplist_nav__link">巅峰榜·k歌金曲</a>
                        </dd>
                        <dd className="toplist_nav__item">
                            <a href="##" className="toplist_nav__link">巅峰榜·MV</a>
                        </dd>
                    </dl>
                    <dl className="toplist_nav__list">
                        <dt className="toplist_nav__tit">全球榜</dt>
                        <dd className="toplist_nav__item">
                            <a href="##" className="toplist_nav__link">vivo 手机 高品质音乐榜</a>
                        </dd>
                        <dd className="toplist_nav__item">
                            <a href="##" className="toplist_nav__link">美国公告牌榜</a>
                        </dd>
                        <dd className="toplist_nav__item">
                            <a href="##" className="toplist_nav__link">美国iTunes榜</a>
                        </dd>
                        <dd className="toplist_nav__item">
                            <a href="##" className="toplist_nav__link">韩国Mnet榜</a>
                        </dd>
                        <dd className="toplist_nav__item">
                            <a href="##" className="toplist_nav__link">英国UK榜</a>
                        </dd>
                        <dd className="toplist_nav__item">
                            <a href="##" className="toplist_nav__link">日本公信榜</a>
                        </dd>
                        <dd className="toplist_nav__item">
                            <a href="##" className="toplist_nav__link">香港电台榜</a>
                        </dd>
                        <dd className="toplist_nav__item">
                            <a href="##" className="toplist_nav__link">香港商台榜</a>
                        </dd>
                        <dd className="toplist_nav__item">
                            <a href="##" className="toplist_nav__link">台湾幽浮榜</a>
                        </dd>
                    </dl>
                </div>


                <div className="ybmod_toplist">
                    <div className="ybtoplist__hd">
                        <h1 className="ybtoplist__tit">巅峰榜·福特新蒙迪欧·流行指数</h1>
                        <span className="ybtoplist_switch">
                            <span className="ybtoplist_switch__data js_chosed_week">2017-06-26</span>
                        </span>
                        <a href="javascript:;" className="toplist__rule js_desc">榜单规则</a>
                    </div>
                    <div className="ybmod_songlist_toolbar">
                        <a href="javascript:;" className="ybmod_btn_green js_all_play">
                            <i className="mod_btn_green__icon_play"></i>
                            播放全部
                        </a>
                        <a href="javascript:;" className="mod_btn js_all_fav">
                            <i className="mod_btn__icon_add"></i>
                            添加到
                        </a>
                        <a href="javascript:;" className="mod_btn js_all_down">
                            <i className="mod_btn__icon_down"></i>
                            下载
                        </a>
                        <a href="javascript:;" className="mod_btn js_batch">
                            <i className="mod_btn__icon_batch"></i>
                            批量处理
                        </a>
                    </div>
                </div>

                <div className="mod_songlist">
                    <ul className="songlist__header">
                        <li className="songlist__edit">
                            <input type="checkbox" className="songlist__checkbox js_check_all"/>
                        </li>
                        <li className="songlist__header_name">歌曲</li>
                        <li className="songlist__header_author">歌手</li>
                        <li className="songlist__header_time">时长</li>
                    </ul>
                    <ul className="songlist__list">
                        {html}
                    </ul>
                </div>	
                <Pagination layout="prev, pager, next" total={this.state.res.total} pageSize={30} onCurrentChange={this.onCurrentChange.bind(this)}/>
	        </div>
            </div>
		)
	}
}

export default Toplist;